<template>
    <jb-crud-page ref="pageRef"  :search-url="`/api/admin/wechatMpinfo/apps`"
                     :search-conditions="pageConditions"
                  :conditions-align="'start'"
    >
        <template #conditions-form>
            <n-input
                v-model:value="pageConditions.q"
                type="text"
                style="width: 130px"
                placeholder="输入关键字搜索"></n-input>
        </template>
        <template #default="{ list , tableStartIndex}">
            <jb-table
                ref="tableRef"
                :start-index="tableStartIndex"
                :data="list"
                :row-config="{ height: 80 }"
                >
                <jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
                <jb-column
                    field="name"
                    title="应用名称"
                    min-width="240"
                    fixed="left"
                ></jb-column>
                <jb-column field="typeName" title="类型" min-width="200"></jb-column>
                <jb-column field="briefInfo" title="简介" width="120">
                    <template #default="{ row }">
                        <jb-btn v-if="row.briefInfo" type="primary" :icon="Icons.EYE" ghost :modal-title="`查看${row.name}简介`" :modal-html="row.briefInfo" :modal-args="{
                            negativeText:'',
                            positiveText:''
                        }">
                            查看
                        </jb-btn>
                        <span v-else>-</span>
                    </template>
                </jb-column>
                <jb-column
                    field="createTime"
                    title="创建时间"
                    min-width="200"
                ></jb-column>
                <jb-column
                    field="updateTime"
                    title="更新时间"
                    min-width="200"
                ></jb-column>

                <jb-column title="操作" width="140" fixed="right">
                    <template #default="{ row }">
                        <jb-btn
                            v-if="!row.linkTargetId"
                            type="info"
                            tip-text="绑定"
                            class="mx-8px"
                            confirm-text="确定绑定该应用？"
                            :url="`/api/admin/wechatMpinfo/submitLinkApp/${props.id}-${row.id}`"
                            @success="pageRef?.loadData()"
                        >
                            绑定
                        </jb-btn>
                        <jb-btn
                            v-else-if="row.linkTargetId===props.id"
                            type="error"
                            tip-text="解绑"
                            class="mx-8px"
                            confirm-text="确定解绑该应用？"
                            :url="`/api/admin/wechatMpinfo/removeLinkApp/${props.id}`"
                            @success="pageRef?.loadData()"
                        >

                             解绑
                        </jb-btn>
                        <jb-btn
                            v-if="row.linkTargetId && row.linkTargetId!==props.id"
                            class="mx-8px"
                            type="tertiary"
                            color="#ccc"
                        >
                            已绑定其他应用
                        </jb-btn>

                    </template>
                </jb-column>
            </jb-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import JbCrudPage from "@/components/_builtin/jb-crud-page/index.vue";
import {Icons} from "@/constants";
import JbBtn from "@/components/_builtin/jb-btn/index.vue";
import {ref} from "vue";

const props = defineProps<{
    id?: string
}>()

const pageRef = ref<InstanceType<typeof JbCrudPage> | null>(null)

const pageConditions = reactive({
    mpId:props.id ?? '',
    q:''
})

</script>


<style scoped>

</style>